<!-- GetSingleNotePage.vue -->
<template>
  <div class="container">
    <div class="input-wrapper">
      <span class="input-label">小红书笔记id</span>
      <el-input v-model="singleInput" placeholder="请输入小红书笔记id" @keyup.enter="handleSingleClick"/>
      <el-button type="primary" @click="handleSingleClick">抓取数据</el-button>
    </div>
<!--    <el-image src="http://127.0.0.1:9000/images/fc12f3ac44925198442dc2116fca0daab79a63f31f125ad870cf50dfcb2c7b40.webp?Content-Type=image%2Fwebp&ResponseContentDisposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T103649Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=8bb3071d29580dae6d2b6e17e8db437de7e7697bb22c89538a30ad10592ae08f"></el-image>-->
    <xhs-table-vue :table-data="singleTableData" :loading="singleLoading" ></xhs-table-vue>
  </div>
</template>

<script setup>
import { getNoteById } from '@/api/xhs'
import { ref } from 'vue'
import xhsTableVue from '@/components/Table/XhsTableVue.vue'
import { ElMessage } from "element-plus";

const singleLoading = ref(false)
const singleInput = ref('')
const singleTableData = ref([])

const handleSingleClick = async () => {
  try {
    if(singleTableData.value.length > 0){
      singleTableData.value = []
    }
    const input = singleInput.value.trim()
    if(input === ''){
      ElMessage({
        message:"输入字段不能为空!",
        type:'warning'

      })
    }else {
      singleLoading.value = true
      const result = await getNoteById(input)
      const data = result['data']
      singleTableData.value = [data]
      console.log(data)

    }
  } catch (error) {
    console.log(error)
  } finally {
    singleLoading.value = false
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}
.input-wrapper {
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.input-label {
  width: fit-content;
  padding: 5px;
  font-size: 16px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
</style>
